import React from 'react';

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            username:''
         };
    }
    inputChange=()=>{
        /*
            获取dom节点
            1、给元素定义ref属性
                <input ref="username" />
            2、通过this.refs.username 获取dom节点
        */
        let val=this.refs.username.value;
        this.setState({
            username:val
        })
    }

    getInput=()=>{
        alert(this.state.username);
    }

    //键盘事件
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode===13){
            alert(e.target.value);
        }
    }

    inputonKeyDown=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode===13){
            alert(e.target.value);
        }
    }

    render() {
        return (
            <div>
                {/* 获取表单的值

                1、监听表单的改变事件                        onChange
                2、在改变的事件里面获取表单输入的值            ref获取 
                3、把表单输入的值赋值给username              this.setState({})
                4、点击按钮的时候获取 state里面的username     this.state.username
                 */}
                <input ref="username" onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>
                <br /><br /> <hr />
                <h2>键盘事件</h2>
                <input onKeyUp={this.inputKeyUp}/>
                <br /><br />
                <input onKeyDown={this.inputonKeyDown}/>
            </div>
        )
    }
}

export default List